<template>
    <div class="check-timeline">
        <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index" placement="left" class="">
                <div class="timeline-item">
                    <div class="timeline-time">{{ activity.timestamp }}</div>
                    <div class="timeline-title">{{ activity.content }}</div>
                    <div class="timeline-remark">{{ activity.remark }}</div>
                </div>
            </el-timeline-item>
        </el-timeline>
    </div>

</template>

<script lang="ts" setup>
const activities = [
    {
        content: '标题',
        timestamp: '2025-04-15',
        remark: '查验记录内容查验记录内容查验记录 查验记录内容查验记录内容',
    },
    {
        content: 'Approved',
        timestamp: '2025-04-13',
        remark: 'Reviewed by admin.Status: Passed',
    },
    {
        content: 'Success',
        timestamp: '2025-04-11',
        remark: 'Final result reached.Marked as complete',
    },
    {
        content: '标题Event start',
        timestamp: '2025-04-15',
        remark: '备注This is the beginning.Everything starts from here.',
    },
    {
        content: 'Approved',
        timestamp: '2025-04-13',
        remark: 'Reviewed by admin.Status: Passed',
    },
    {
        content: 'Success',
        timestamp: '2025-04-11',
        remark: 'Final result reached.Marked as complete',
    },
    {
        content: '标题Event start',
        timestamp: '2025-04-15',
        remark: '备注This is the beginning.Everything starts from here.',
    },
    {
        content: 'Approved',
        timestamp: '2025-04-13',
        remark: 'Reviewed by admin.Status: Passed',
    },
    {
        content: 'Success',
        timestamp: '2025-04-11',
        remark: 'Final result reached.Marked as complete',
    },
    {
        content: '标题Event start',
        timestamp: '2025-04-15',
        remark: '备注This is the beginning.Everything starts from here.',
    },
    {
        content: 'Approved',
        timestamp: '2025-04-13',
        remark: 'Reviewed by admin.Status: Passed',
    },
    {
        content: 'Success',
        timestamp: '2025-04-11',
        remark: 'Final result reached.Marked as complete',
    },
    {
        content: '标题Event start',
        timestamp: '2025-04-15',
        remark: '备注This is the beginning.Everything starts from here.',
    },
    {
        content: 'Approved',
        timestamp: '2025-04-13',
        remark: 'Reviewed by admin.Status: Passed',
    },
    {
        content: 'Success',
        timestamp: '2025-04-11',
        remark: 'Final result reached.Marked as complete',
    },
]
</script>

<style lang="less" scoped>
.check-timeline {
    padding-left: 70px;
    max-height: 300px;
    height: 300px;
    overflow-y: auto;

    .timeline-item {
        position: relative;
        padding-right: 22px;
        font-size: 16px;
        color: #474F56;


        .timeline-time {
            position: absolute;
            top: 0;
            left: -130px;
        }


        .timeline-title {
            margin-bottom: 8px;
        }

        .timeline-remark {
            margin: 0;
            font-size: 14px;
            color: #9F9F9F;
        }
    }
}
</style>